<template>
    <div id="selectMembersPage">
        <el-row>
            <el-col :span="10" :offset="1">
                <div class="selectRow">
                    <el-input v-model="memberTel" placeholder="请输入手机号"></el-input>
                </div>
            </el-col>
            <el-col :span="3">
                <div class="selectRow">
                    <el-button type="primary" icon="el-icon-search" @click="selectMemberByTel">查询</el-button>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="22" :offset="1" class="selectRow">
                <el-table :data="memberData" border :header-cell-style="this.$store.state.headerCssObj" :cell-style="this.$store.state.cellCssObj" style="width: 100%">
                    <el-table-column prop="memberName" label="会员名"></el-table-column>
                    <el-table-column prop="memberTel" label="联系电话"></el-table-column>
                    <el-table-column prop="memberMoney" label="余额"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" @click="addMoney(scope.$index, scope.row)">充值</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <!--以下是充值弹窗-->
        <el-dialog title="会员充值" :visible.sync="dialogFormVisible" width="500px">
            <el-form :rules='moneyNumRules' :model="addMoneyNum" ref="addMoneyNum">
                <el-form-item label="会员手机号" :label-width="formLabelWidth">
                    <el-input v-model="memberTel" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="充值金额" :label-width="formLabelWidth" prop="num">
                    <el-input v-model="addMoneyNum.num" autocomplete="off" placeholder="请输入充值金额"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="toAddMoney('addMoneyNum')">充值</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "selectMembersPage",
        data(){
            //金额输入验证
            let YZ_addMoneyNum = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入充值金额'));
                } else {
                    if (!(/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(value))) {
                        callback(new Error('金额输入错误'));
                    }else {
                        callback();
                    }
                }
            };
            return{
                memberTel:'',   //会员手机号
                memberData:[
                    {memberName:'111',memberTel:'123',memberMoney:'1000'},
                ],
                formLabelWidth:'100px',    //弹出框中label占的宽度
                dialogFormVisible:false,     //弹出框的状态
                addMoneyNum:{num:''},   //充值的金额
                moneyNumRules: {     //金额输入验证
                    num: [{ validator: YZ_addMoneyNum, trigger: 'blur' }]
                }
            }
        },
        methods:{
            selectMemberByTel(){   //点击查询按钮
                console.log(this.memberTel);
                if(this.memberTel===''){
                    this.$message({
                        type: 'warning',
                        message: '请输入会员手机号'
                    });
                }else {
                    console.log(this.memberTel);
                }
            },
            addMoney(index,row){   //点击表格中充值按钮
                this.dialogFormVisible=true;
            },
            toAddMoney(formName){   //确认充值
                this.$refs[formName].validate((valid) => {
                    if (valid){
                        this.$confirm('确认充值?', '提示', {
                            confirmButtonText: '确认',
                            cancelButtonText: '取消',
                            type: 'info'
                        }).then(() => {      //确认充值
                            //上传充值金额
                            this.dialogFormVisible=false;   //关闭弹窗
                            this.$message({
                                type: 'success',
                                message: '充值成功!'    //通知内容
                            });
                            //这里刷新表格
                        })
                    }
                });
            }
        }
    }
</script>

<style scoped lang="less">
    #selectMembersPage{
        min-height: 500px;
        background-color: #ffffff;
        .selectRow{
            padding-top: 30px;
        }
    }
</style>